<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="app">
  <button @click="fn">点击</button>
<!--    函数加不加括号无所谓，但在该此法环境下会默认有$event事件对象-->
<!--    1.当不传参数时，不需要加括号-->
    <button @click="fn1">不加括号执行函数</button>
<!--    2.当传入参数时，如果想要获取事件对象就需要传入$event-->
    <button @click="fn2(1,$event)">加括号执行函数</button>
</div>
<script>
<!--    去除非生产环境的警告提示-->
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#app',
        data(){
            return{
            //    data中不推荐放函数，因为data是存放数据的地方，vue并没有帮我们处理函数的this问题
            }
        },
        methods:{
            fn(){
                //因为我们不需要直接操作DOM，我们只需要直接操作data数据即可，所以这里的this是vm对象
                console.log(this)
                alert('我是一个弹窗')
                console.log(a)
            },
            fn1(e){
                console.log(e)//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
            },
            fn2(a,event){
                console.log(a,event)//1 PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
            }
        }
    })
    let a = 10
</script>
</body>
</html>